<template>
  <div class="app-container">
    <el-dialog :title="pageTitle" :visible.sync="dialogFormVisible" :before-close="beforeClose">
      <el-form :model="form">
        <el-form-item label="角色名称：" :label-width="formLabelWidth">
          <el-input v-model="form.title" minlength="2" maxlength="10" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色描述：" :label-width="formLabelWidth">
          <el-input v-model="form.describe" placeholder="请输入角色描述" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="选择店铺：" :label-width="formLabelWidth">
              <el-select v-model="form.store_id" placeholder="请选择店铺">
                <el-option
                  v-for="item in shops"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色状态：" :label-width="formLabelWidth">
              <el-switch
                v-model="form.status"
                :active-text="form.status==1?'启用':'禁用'"
                active-value="1"
                inactive-value="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="选择权限：" :label-width="formLabelWidth">
          <el-tree
            ref="tree"
            :data="nodes"
            show-checkbox
            node-key="id"
            :default-checked-keys="selectKeys"
            :default-expanded-keys="openKeys"
            :props="defaultProps"
            :check-on-click-node="true"
            :expand-on-click-node="false"
            @check="select"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { handle, getMenuNode, getStore } from '@/api/role'
export default {
  name: 'RoleHandle',
  data() {
    return {
      form: {
        id: 'new',
        store_id: '',
        title: '',
        describe: '',
        status: '1',
        menu_ids: '',
        half_menu_ids: '',
        rule_ids: ''
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
      pageTitle: '添加角色',
      nodes: [],
      shops: [],
      defaultProps: {
        children: 'children',
        babel: 'title'
      },
      selectKeys: [],
      openKeys: []
    }
  },

  methods: {
    select(data, res) {
      const nodes = res.checkedNodes
      const halfNodes = res.halfCheckedNodes
      this.form.menu_ids = ''
      this.form.half_menu_ids = ''
      this.form.rule_ids = ''

      for (const key in halfNodes) {
        if (halfNodes[key].type === 'menu') {
          this.form.half_menu_ids = this.form.half_menu_ids + halfNodes[key].id + ','
        }
      }
      for (const key in nodes) {
        if (nodes[key].type === 'menu') {
          // 设置选中的菜单
          this.form.menu_ids = this.form.menu_ids + nodes[key].id + ','
        } else {
          // 设置权限
          this.form.rule_ids = this.form.rule_ids + nodes[key].id + ','
        }
      }
    },

    beforeClose() {
      this.canel()
    },

    add() {
      this.form.id = 'new'
      this.form.store_id = ''
      this.form.status = '1'
      this.form.title = ''
      this.form.describe = ''
      this.form.menu_ids = ''
      this.form.rule_ids = ''
      this.pageTitle = '添加角色'
      this.dialogFormVisible = true
      var arr = []
      getMenuNode().then(res => {
        for (const index in res.data) {
          arr.push(res.data[index])
        }
        this.nodes = arr
        this.$refs.tree.setCheckedKeys([])
      })
      getStore({}).then(res => {
        this.shops = res.data
      })
    },

    edit(item) {
      this.form.id = item.id
      this.form.store_id = item.store_id
      this.form.title = item.title
      this.form.status = item.status.toString()
      this.form.describe = item.describe
      this.form.menu_ids = item.menu_ids
      this.form.rule_ids = item.rule_ids
      this.pageTitle = '编辑角色'
      this.dialogFormVisible = true

      getMenuNode().then(res => {
        const arr = []
        for (const index in res.data) {
          arr.push(res.data[index])
        }
        this.nodes = arr

        const menuStr = this.form.menu_ids
        const menus = menuStr.split(',')
        const ruleStr = this.form.rule_ids
        const rules = ruleStr.split(',')
        const treeArr = rules.concat(menus)
        const finalArr = []
        for (const index in treeArr) {
          if (treeArr[index] !== '') {
            finalArr.push(parseInt(treeArr[index]))
          }
        }
        this.selectKeys = finalArr
        this.openKeys = finalArr
      })
      getStore({}).then(res => {
        this.shops = res.data
      })
    },

    canel() {
      this.dialogFormVisible = false
      this.form.id = 'new'
      this.form.title = ''
      this.form.describe = ''
      this.form.status = '1'
      this.form.menu_ids = ''
      this.form.rule_ids = ''
      this.nodes = []
    },

    sure() {
      handle(this.form).then(res => {
        Message({
          message: res.data.info,
          type: 'success',
          duration: 2000
        })
        this.$emit('afterSave')
        this.canel()
      })
    }
  }
}
</script>
